﻿@page "/components/slider"

<DocsPage>
    <DocsPageHeader Title="Slider" Component="@nameof(MudSlider<T>)" SubTitle="A slider is a visual representation and action to let the user select from a range of values.">
        <Description>
            Sliders should present the full range of available values.
            The slider value should take effect immediately.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Sliders">
                <Description>Lets you select a value along the whole range.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderBasicExample)">
                <SliderBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Filled">
                <Description>The slider also supports <CodeInline>Variant.Filled</CodeInline> which fills the selected value's portion of the slider.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderFilledExample)">
                <SliderFilledExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Step Sliders">
                <Description>You can choose the increment with the <CodeInline>Step</CodeInline> prop.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderStepsExample)">
                <SliderStepsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Min and Max Values">
                <Description>With the <CodeInline>Min</CodeInline> and <CodeInline>Max</CodeInline> properties, you can set the minimum and maximum allowed value.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderMinMaxExample)">
                <SliderMinMaxExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Nullable">
                <Description>
                    If undefined state is required use <CodeInline>@nameof(MudSlider<double>.NullableValue)</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderNullableExample)">
                <SliderNullableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Ticks" />
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Display Ticks">
                        <Description>Tick marks can be displayed with <CodeInline>TickMarks</CodeInline> property set to true, it's common that it's combined with the <CodeInline>Step</CodeInline> property as well.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(SliderTickMarkExample)">
                        <SliderTickMarkExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Labels">
                        <Description>Labels can be added to each tick by providing a string array to the <CodeInline>TickMarkLabels</CodeInline> property.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(SliderTickLabelExample)">
                        <SliderTickLabelExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Value Label">
                <Description>
                    Use the slider below to see the value label, this can be used by setting <CodeInline>@nameof(MudSlider<double>.ValueLabel)</CodeInline> property to true.
                    <br />
                    Use <CodeInline>@nameof(MudSlider<double>.ValueLabelFormat)</CodeInline> and <CodeInline>@nameof(MudSlider<double>.Culture)</CodeInline> to change the formatting.
                    <br />
                    For more customization use <CodeInline>@nameof(MudSlider<double>.ValueLabelContent)</CodeInline> RenderFragment.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderValueLabelExample)">
                <SliderValueLabelExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Size">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SliderSizeExample)">
                <SliderSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Vertical">
                <Description>MudSlider can be displayed vertically with the <CodeInline>Vertical</CodeInline> property set to true.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" Code="@nameof(SliderVerticalExample)">
                <SliderVerticalExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
